<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="档案室名称" prop="archiveName">
        <el-input
          v-model="queryParams.archiveName"
          placeholder="请输入档案室名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
    </el-row>

    <div class="cabinet-container">
      <div v-for="(row, rowIndex) in cabinetMatrix" :key="rowIndex" class="cabinet-row">
        <div
          v-for="(col, colIndex) in row"
          :key="colIndex"
          class="cabinet-cell"
          @mouseenter="hoverCell(rowIndex, colIndex, col)"
          @mouseleave="resetCell(rowIndex, colIndex, col)"
          @click="chufa(col.archiveId)"
        >
          <div class="archive-name" >{{ col.archiveName }}</div>
          <div class="archive-description">{{ col.archiveDescription }}</div>
          <div class="archive-creater">{{ col.creater }}</div>
          <div class="archive-createDate">{{ col.createDate }}</div>
        </div>
      </div>
    </div>

    <!-- 添加或修改档案室管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="档案室名称" prop="archiveName">
          <el-input v-model="form.archiveName" placeholder="请输入档案名称"/>
        </el-form-item>
        <el-form-item label="档案室描述" prop="archiveDescription">
          <el-input v-model="form.archiveDescription" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title1" :visible.sync="open1" width="500px" append-to-body>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="handleSearch">查 询</el-button>
        <el-button type="primary" @click="handleUpdate">修 改</el-button>
        <el-button type="primary" @click="handleDelete">删 除</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import {addCabinet, delCabinet, getCabinet, listCabinet, updateCabinet} from "@/api/fund/archiveCabinet";

export default {
  name: "Cabinet",
  data() {
    return {

      // 显示搜索条件
      showSearch: true,
      archiveId: null,
      filingId: null,
      // 档案管理表格数据
      cabinetMatrix: [],
      // 弹出层标题
      title: "",
      title1: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      form1: {},
      form3: {},
      // 表单校验
      rules: {
        archiveName: [
          {required: true, message: "档案室名称不能为空", trigger: "blur"}
        ],
      },
      rules3: {
        filingName: [
          {required: true, message: "档案柜名称不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.fetchCabinetData();
  },
  methods: {
    /** 档案室触发操作 */
    chufa(date) {
      this.open1 = true;
      this.archiveId = date;
    },
    /** 查询档案室管理列表 */
    fetchCabinetData() {
      listCabinet(this.queryParams).then(response => {
        this.cabinetMatrix = this.transformToMatrix(response.rows);
      });
    },
    transformToMatrix(data) {
      // 将数据转换为矩阵形式
      let matrix = [];
      // 假设每行有5列
      let cols = 5;
      for (let i = 0; i < data.length; i += cols) {
        matrix.push(data.slice(i, i + cols));
      }
      return matrix;
    },

    /** 搜索档案室操作 */
    handleQuery() {
      this.fetchCabinetData();
    },

    /** 重置档案室操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },

    /** 新增档案室操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加档案室管理";
    },

    /** 修改档案室操作 */
    handleUpdate(row) {
      const archiveId = this.archiveId
      getCabinet(archiveId).then(response => {
        this.form = response.data;
        this.open = true;
        this.open1 = false;
        this.title = "修改档案室管理";
      });
    },

    /** 档案室提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.archiveId != null) {
            updateCabinet(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.open1 = false;
              this.fetchCabinetData();
              this.reset();
            });
          } else {
            addCabinet(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.fetchCabinetData();
              this.reset();
            });
          }
        }
      });
    },

    // 档案室取消按钮
    cancel() {
      this.open = false;
      this.fetchCabinetData();
      this.reset();
    },

    /** 档案室删除按钮操作 */
    handleDelete(row) {
      const archiveId = this.archiveId;
      this.$modal.confirm('是否确认删除档案室管理编号为"' + archiveId + '"的数据项？').then(function () {
        return delCabinet(archiveId);
      }).then(() => {
        this.fetchCabinetData();
        this.$modal.msgSuccess("删除成功");
        this.open1 = false;
      }).catch(() => {
      });
    },

    hoverCell(rowIndex, colIndex, col) {
      if(col.archiveDescription.length>10){
        col.archiveDescription = col.archiveDescription1;
      }
      // 动态改变悬停格子的样式
      const cell = this.$el.querySelector(`.cabinet-row:nth-child(${rowIndex + 1}) .cabinet-cell:nth-child(${colIndex + 1})`);
      if (cell) {
        cell.style.backgroundColor = '#e0f7fa'; // 悬停时的背景色
      }
    },
    resetCell(rowIndex, colIndex, col) {
      if(col.archiveDescription.length>10){
        col.archiveDescription = col.archiveDescription.slice(0, 10)+"...";
      }
      // 恢复格子的样式
      const cell = this.$el.querySelector(`.cabinet-row:nth-child(${rowIndex + 1}) .cabinet-cell:nth-child(${colIndex + 1})`);
      if (cell) {
        cell.style.backgroundColor = ''; // 恢复默认背景色
      }
    },


  }
};
</script>
<style scoped>
.cabinet-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cabinet-row {
  display: flex;
  gap: 15px;
}

.cabinet-cell {
  padding: 20px;
  background: linear-gradient(135deg, #ffffff, #f9f9f9);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-align: center;
  width: 250px;
  height: 130px;
  background:#fff url("~@/assets/logo/档案室.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  text-align: right;
}

.cabinet-cell:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #f0f7f8, #e8f4ff);
}
.cabinet-cell:hover .archive-name{
  display: none;
}
.cabinet-cell:hover .archive-creater{
  display: none;
}
.cabinet-cell:hover .archive-createDate{
  display: none;
}
.cabinet-cell:hover .archive-description{
  text-align: center;
  padding-left: 0;
}
.archive-name {
  font-size: 18px;
  font-weight: bold;
  color: #0b0b0b;
  margin-bottom: 8px;
}

.archive-description {
  font-size: 14px;
  color: #ea6f06;
  text-align: right;
  padding-left: 105px;
}

.archive-creater {
  font-size: 14px;
  color: #0b77fd;
}

.archive-createDate {
  font-size: 14px;
  color: #0b77fd;
}


.cabinet-container1 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cabinet-row1 {
  display: flex;
  gap: 15px;
}

.cabinet-cell1 {
  padding: 20px;
  background: linear-gradient(135deg, #ffffff, #f9f9f9);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-align: center;
  width: 180px;
  height: 120px;
  background-image: url("~@/assets/logo/logo.png");
}

.cabinet-cell1:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

</style>
